import React, { useMemo, useCallback } from 'react';

const set = new Set();
// 页面有2个按钮 当我点击修改数值的时候 也会触发 tips  我希望我点击数值的时候不触发tips函数
export const UseMemoTest: React.FC = () => {
    const [count, setCount] = React.useState(0);
    const [flag, setFlag] = React.useState(false);
    // const tips = ()=>{
    //     console.log("tips执行");
    //     return flag?'此时flag为true':'此时flag为false';
    // }
    const momoTips = useMemo(() => {
        console.log("mometips执行");
        return flag ? '此时flag为true' : '此时flag为false';
    }, [flag]);


    // 这个addFun相当于创建了3次这个函数在内存中； 可以用useCallback 方法解决优化, 我就希望这个addFun生成一次这个函数，
    // const addFun = ()=>{
    //     setCount(e=>e+1);
    // }


    const addFun = useCallback(() => {
        setCount(e => e + 1);
    }, [])
    set.add(addFun);
    console.log(set.size);//希望这个值为1

    return (
        <>
            <h1>useCallback</h1>
            <h2>数值：{count}</h2>
            <button onClick={addFun}>修改数值</button>
            <button onClick={() => {
                setFlag(e => !e);
            }}>修改flag值</button>
            {/* {tips()} */}
            {momoTips}
        </>
    )
}